<html>
<head>
<link href="../css/style.css" type="text/css" rel="stylesheet">
<!-- <script type="text/javascript" src="/WEB-INF/JavaScript/jquery-1.7.1.js"></script>
 -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript" src="../JavaScript/common.js"></script>
<script type="text/javascript" src="../JavaScript/commonValidation.js"></script>
<script type="text/javascript" src="../JavaScript/dropdown.js"></script>
<link href='http://fonts.googleapis.com/css?family=Belgrano' rel='stylesheet' type='text/css'>
</head>
<body>
	<h1 class="header" align="center" width="100%">Select Trip</h1>
	<form class="form-style-1" method="post">
		<div width="100%" align="center" style="padding-top: 30px;padding-botom:30px">
			<table border="0" width="50%" >
				<tr>
					<td style="vertical-align: top" align="left" >Trip for  : <span id="schIdSpan"><select id="schId">
						<option>20</option>
						<option>21</option>
						<option>22</option>
						<option>23</option>
					</select></span></td>					
				</tr>
			</table>
		</div>
	</form>
	<form >
		<div width="100%" align="center" >
			<div align="center"  id='selectTripDiv' style="width:51%;padding-top:0px;border:0px solid red;overflow:auto;" scrollHeight="100">
				<table border="0" width="99%" id="selectTripDtl">			
					<thead>
						<tr>
							<th style='display:none'></th>
							<th width="33%" align="center">Driver Id</th>
							<th width="33%" align="center">Cab Id</th>
						</tr>
					</thead>
					<tbody>
						<tr id="dummy"><td colspan="2" align="center"  style="color:blue">---  No Data Present   ---</td></tr>
					</tbody>
				</table>			
			</div>
		</div>
		<div width="100%" align="center">
			<table  width="50%" style="border:0px">
				<tr>
					<td colspan="5" align="right">
						<input type="button" value="Add New" id="addNew" /> 
						<input type="button" value="Save" id="save"/>
					</td>
				</tr>
			</table>
		</div>
	</form>	
</body>
<script>
	$(function() {
		
		
		
		setCombo();
		function setCombo(){
			 $.ajax({
				    url: "/cabplanning-service/selectTripSchedule",
				    type: "POST",
				    data: "aaa",
				    contentType: "application/json; charset=utf-8",
				    beforeSend:function(xhr){
				    	xhr.setRequestHeader("Accept","application/json");
				    	xhr.setRequestHeader("Content-Type","application/json");
				    },
				    success: function (msg) {
				    	 if (msg) {
				    		 buildSelect(msg)
			               } else {
			                  alert("Something went wrong !!!");
			            }
				    }
			 }); 
		}
		
		$("#schId").change(function() {			
			var schId = $('#schId').val();
			 var json={"schId":schId};
		 	  $.ajax({
			    url: "/cabplanning-service/selectTrip",
			    type: "POST",
			    data: schId,
			    contentType: "application/json; charset=utf-8",
			    beforeSend:function(xhr){
			    	xhr.setRequestHeader("Accept","application/json");
			    	xhr.setRequestHeader("Content-Type","application/json");
			    },
			    success: function (msg) {
			    	 if (msg) {
			    		 buildHtmlTable(msg)
		               } else {
		                  alert("Something went wrong !!!");
		            }
			    }
			    
			}); 
		});
		
		
		
		$("#addNew").click(function() {
			$("#dummy").remove();
			$('#selectTripDtl tr').length>11?$("#selectTripDiv").css({"height":"500"}):null;
				$('#selectTripDtl > tbody').append("<tr>"
			+ "<td style='display:none' ><input type='hidden' name='cabId'></td>"
			+ "<td align='center'><input type='Text' maxlength='15' size='15' autocomplete='off' /></td>"
			+ "<td align='center'><input type='Text' maxlength='15' size='15' autocomplete='off' /></td>"
			+ "</tr>").slideDown("slow");
		});	
		 var headers = ['scheduleId','driverId','cabId'];
		 var ColName = ['','Driver Id','Cab Id'];
		 
		 var json = {"list": [
		                  ]
		              };
		 
		 
		 function buildSelect (json){ //alert(json)
			 var row$ ='<select id="schId">';
			 for (var i = 0 ; i < json.length ; i++) {				 
				 var scheduleId =  json[i]["scheduleId"];
				 var startTime =  json[i]["startTime"];
				 row$ += '<option value="'+scheduleId+'">'+startTime+'</option>';
			 }
			 row$ +='</select>';			 
			 $("#schIdSpan").html(row$);
			 
		 }
		 

		// Builds the HTML Table out of myList.
		function buildHtmlTable(json) {	//alert(json.html());
		
			$("#selectTripDtl").empty();
		    $("#selectTripDtl").append('<thead><tr><th style="display:none"></th><th width="33%" align="center">Driver Id</th><th width="33%" align="center">Cab Id</th></tr></thead><tbody>');
		    myList = json;	
		    if(myList.length==0){
		    	$("#selectTripDtl").append('<tr id="dummy"><td colspan="2" align="center"  style="color:blue">---  No Data Present   ---</td></tr>')
		    }
		    else{
			    for (var i = 0 ; i < myList.length ; i++) {
			        var row$ = $('<tr/>');
			        var isNewRecord = true;
			        for (var colIndex = 0 ; colIndex < headers.length ; colIndex++) {
			            var cellValue = myList[i][headers[colIndex]];
	
			            if (cellValue == null) { cellValue = ""; }
			            if(colIndex==0){						// CabId  as hidden field
			            	row$.append($('<td align="center" style="display:none">').append($("<input type='hidden' maxlength='15' size='15' autocomplete='off' />").val(cellValue)));
			            	//if(cellValue!= "") {isNewRecord = false;} // CabId  is not null/"" then it is old record
			            }
						else{
							if(!isNewRecord && colIndex!=2)		// not new record and not Capacity disable it
			            		row$.append($('<td align="center">').append($("<input type='Text' disabled maxlength='15' size='15' autocomplete='off' />").val(cellValue)));
							else{
								if (colIndex == 3)
									row$.append($('<td align="center">').append($("<input type='Text' maxlength='15' size='15' onkeypress='return common.isNumber(event)'/>").val(cellValue)));
								else							
									row$.append($('<td align="center">').append($("<input type='Text' maxlength='15' size='15' autocomplete='off' />").val(cellValue)));	
							}
						}	
			            $("#selectTripDtl").append(row$);
			        }
			    }
		    }
		}
		//buildHtmlTable(json);
		 
		function tableToJson(table) {
			var json = {}
		    var data = [];
			//alert(table.rows.length);
			if(table.rows.length == 2 && document.getElementById('dummy')){
				alert("Nothing to Save");
				 return false;
			}
			
		    for (var i=1; i<table.rows.length; i++) {
		        var tableRow = table.rows[i];
		        var rowData = {};
		        for (var j=0; j<tableRow.cells.length; j++) {
		        	 var value = tableRow.cells[j].getElementsByTagName('input')[0].value;
		        	 if(j!=0 && (!value || value=="")){
		        		 alert("Please Enter "+ ColName[j]);
		        		 return false;
		        	  }
		        	 if(j==0){
		        		 rowData[ headers[j] ] =  $('#schId').val();
		        	 }else{
		            	rowData[ headers[j] ] = tableRow.cells[j].getElementsByTagName('input')[0].value;	
		        	 }
		        }
		        data.push(rowData);
		    }
		     json["list"]= data;
		     //alert(JSON.stringify(json))
		     return data;
		}
		
		$("#save").click(function() {
			var json = tableToJson(document.getElementById('selectTripDtl'));
			  console.log(json); 
			  if(!json) return;
			   $.ajax({
				   url: "/cabplanning-service/saveselectTrip",
				    type: "POST",
				    data: JSON.stringify(json),
				    contentType: "application/json",
				    success: function (msg) {
				    	 if (msg) {
			                //   alert("");
			               } else {
			                  alert("Something went wrong !!!");
			            }
				    }
				    
			}); 
		});

	});
	
	
	
</script>
</html>